<template>
  <div class="my-view">
    <h1>Testing</h1>

    <section class="test">
      counterStore.count: {{ counterStore.count }}
      <button @click="counterStore.increment">Increment</button>
      <button @click="add">add</button>
      <button @click="patch">$patch</button>

      {{ clog('hello world') }}
    </section>

    <section class="test">
      like.name: {{ like.name }}
      <button @click="changeLikeName">changeLikeName</button>
    </section>

    <section class="test">
      counterStore.todos: {{ counterStore.todos }}
      <button @click="addTodo">add todo</button>
    </section>

    <section class="test">
      counterStore.count: {{ counterStore.count }}
      <button @click="add2">add2</button>
    </section>

    <section class="test">
      dataRef: {{ dataRef }}
      <MyModal :title="titleRef" :data="dataRef" />
      <button @click="addRole">add robin</button>
    </section>

    <section class="test">
      {{ hitCount }}
      <button @click="addHitCount">addHitCount</button>
    </section>
  </div>
</template>


<script lang="ts" setup>
import { useCounterStore } from '@/pinia/counter'
// eslint-disable-next-line
import { getCurrentInstance, reactive, ref, toRef } from 'vue';
import useClog from '@/hooks/useClog'
import { storeToRefs } from 'pinia';
import MyModal from '@/components/MyModal.vue';

const counterStore = useCounterStore()
const mlog = useClog('MyView')

const add = () => {
  counterStore.count++
}

const patch = () => {
  counterStore.$patch({
    count: counterStore.count + 1
  })
}

const lufy = reactive({
  name: 'lufy',
  age: 12,
  like: {
    type: 'music',
    name: 'jazz'
  },
  friends: [
  {
      name: 'robin',
      age: 14,
      like: {
        type: 'movie',
        name: 'star wars'
      }
    }
  ]
})

mlog('lufy是响应式的proxy对象:', lufy)
mlog('lufy.like也返回响应式的proxy对象:', lufy.like)

// 从响应式对象解构出来的子对象，依然是响应式的；从响应式对象解构变量会丢失响应效果，指的是属性值为原始类型的情况
const { like } = lufy
mlog('从lufy解构复制的变量like也是proxy对象:', like)

const changeLikeName = () => {
  like.name = like.name + '-new'
}

// 从store解构引用类型的数据，不会破坏响应性
const { todos } = counterStore
function addTodo() {
  todos.push({
    text: 'new todo',
    done: false
  })
}


const { count } = storeToRefs(counterStore)
function add2() {
  count.value++
}

// store上有内置方法和属性有: $patch  $reset $state
mlog('counterStore:', counterStore)


const titleRef = ref('标题')
mlog('页面组件内的 titleRef:', titleRef)

const dataRef = ref([
  {name: 'lufy', age: 12},
  {name: 'nami', age: 11},
])
mlog('页面组件内的 dataRef:', dataRef)

const addRole = () => {
  dataRef.value.push({name: 'robin', age: 14})
}

const dragon = {
  name: 'dragon',
  age: 33
}

// eslint-disable-next-line
// @ts-ignore
lufy.father = dragon
// eslint-disable-next-line
// @ts-ignore
mlog('lufy.father:', lufy.father,  'lufy.father === dragon:', lufy.father === dragon, dragon)

// ref作为响应式对象的属性值时，自动解包
const color = ref('blue')
const nami = reactive({
  color
})
mlog('nami.color:', nami.color)
mlog('color 和 nami.color 保持响应式连接, 可以在控制台修改测试:', 'nami:', nami, 'color ref:', color)

const hitState = reactive({
  count: 0
})

const hitCount = toRef(hitState, 'count')
const addHitCount = () => {
  hitCount.value++

  mlog('hitCount:', hitCount)
  mlog('hitState:', hitState)
}

// 可以尝试对同一个对象调用 reactive() 得到相同的 proxy 对象；
// 对响应式对象再次调用reactive(), 直接返回该响应式对象自身
Object.assign(console, { reactive, ref, person: { name: 'Lucy', age: 12} })

</script>